/**
* 系统管理 用户管理
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>指标集管理</el-breadcrumb-item>
    </el-breadcrumb>

    <div style="padding:5px;color:#000000;text-align: center;font-family:PingFang SC;font-size:30px">指标集列表</div>

    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">

      <el-form-item label="类别" prop="tag">
        <el-select size="small" v-model="formInline.tag"auto-complete="off"placeholder="请选择类别">
          <el-option label="条件" value="条件"></el-option>
          <el-option label="指标" value="指标"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-input size="small" placeholder="输入条件内容"  @keyup.enter="getSearchPage" v-model="formInline.name" ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="getSearchPage">查询</el-button>
        <el-button size="small" type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
        <el-button size="small" type="success" icon="el-icon-plus" @click="handleEdit()">新增</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="indicatorListData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" v-if="false"  type="selection" width="50">
      </el-table-column>

      <el-table-column align="center" v-if="false"  sortable prop="id" label="序号" min-width="80">
      </el-table-column>
      <el-table-column align="center" prop="name" label="指标集名称" min-width="200">
      </el-table-column>
      <el-table-column align="center" sortable prop="createTime" label="创建时间" min-width="120">
      </el-table-column>
      <el-table-column align="center" sortable prop="updateTime" label="修改时间" min-width="120">

      </el-table-column>
      <el-table-column align="center" label="操作" min-width="150">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="seeDetail(scope.row.id,scope.row.name)">查看详情</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>

    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="50%" @click='closeDialog("edit")'>
      <el-form label-width="100px" ref="editForm" :model="editForm" :rules="rules">
        <el-form-item label="指标集名称" prop="name">
          <el-input size="small" v-model="editForm.name" auto-complete="off" placeholder="请输入指标集名称"></el-input>
        </el-form-item>

        <el-form-item label="指标" prop="indicators">
          <el-select  size="medium"
                      v-model="indicatorIds"
                      auto-complete="off"
                      multiple placeholder="请选择指标"
                     >
            <el-option
              v-for="item in exampleData"
              :key="item.id"
              :label="item.example"
              :value="item.id">    <!--可能需要修改-->
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='check'>测试</el-button>
        <el-button size="small" @click='closeDialog("edit")'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  // 导入请求方法
  import {
    userList,
    userSave,
    userDelete,
    userPwd,
    userExpireToken,
    userFlashCache,
    userLock,
    UserDeptTree,
    UserDeptSave,
    UserDeptdeptTree,
    UserChangeDept, targetList
  } from '../../api/userMG'
  import Pagination from '../../components/Pagination'
  import axios from "axios";
  export default {
    data() {
      return {
        pageparm: {
          currentPage: 1,
          pageSize: 10,
          total: 10
        },
        loading: false, //是显示加载
        title: '添加条件内容',
        editFormVisible: false, //控制编辑页面显示与隐藏

        // 编辑与添加
        editForm: {
          id: '',
          name:'',
          indicators:'',
          token: localStorage.getItem('logintoken')
        },

        // rules表单验证
        rules: {
          id: [
            { required: true, message: '请输入序号', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入指标集名称', trigger: 'blur' }
          ],
          indicators: [
            { required: true, message: '请选择指标', trigger: 'blur' }
          ],
        },
        formInline: {
          name:'',
          page: 1,
          limit: 10,
          varLable: '',
          varName: '',
          tag:'',
          token: localStorage.getItem('logintoken'),
          tagId: ""
        },

        //指标列表数据
        indicatorIds:'',
        exampleData:[],
        // 指标集列表
        indicatorListData:[],
        //搜索
        ruleForm: {
          name: '',
          pageNum:'1',
          pageSize:'10',
        },

      }
    },
    // 注册组件
    components: {
      Pagination
    },

    /**
     * 数据发生改变
     */
    watch: {},

    /**
     * 创建完毕
     */
    created() {
      var data1 = localStorage.getItem('userName');
      var data2 = localStorage.getItem('pwd');
      var data3 = localStorage.getItem('userId');
      this.getSearchPage(this.formInline)
      this.getExample()

    },

    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
      check(){
        console.log(this.editForm)
        this.editForm.indicators = this.indicatorIds.join(', ');
        this.$message({
          type: 'success',
          message: this.editForm
        })
      },
      // 获取数据方法
      getSearchPage(formInline) {
        this.logining = true
        let url = this.$global.javaUrl +"/indicatorList/list"
        let config = {
          headers:
            {
              //'Content-Type':'application/json',
              'user' : localStorage.getItem('userId')
            },
          params:
            {
              name:this.formInline.name,
              pageNum: this.formInline.page,
              pageSize:this.formInline.limit,

            }
        }
        axios.get(url, config).then(response=>{
          this.indicatorListData = response.data.data.rows
          this.pageparm.total=response.data.data.records
          this.indicatorListData.forEach(item => {
            item.indicators = item.indicators.split(','); // 将hobby字段的值从字符串转换为数组
          });
          console.log(this.indicatorListData)
        })

      },
      //显示编辑界面
      handleEdit: function() {
        this.editFormVisible = true
        this.editForm.id = ''
        this.editForm.name = ''
        this.indicatorIds = ''
        this.editForm.indicators = ''

      },
      // 编辑、添加提交方法
      submitForm(editData) {
        let config = {
          headers:
            {
              'Content-Type':'application/json',
              'user' : localStorage.getItem('userId')
            }
        }
        this.editForm.indicators = this.indicatorIds.join(',');
        this.$refs[editData].validate(valid => {
          if (valid)
          {
            // 请求方法
            axios
              .post(this.$global.javaUrl +"/indicatorList/saveOrUpdate",this.editForm,config)
              .then(res => {
                this.editFormVisible = false
                this.loading = false
                this.pageparm.currentPage = this.formInline.page
                this.pageparm.pageSize = this.formInline.limit
                this.pageparm.total = res.data.data.records
                if (res.data.data != null) {
                  this.$message({
                    type: 'success',
                    message: "数据保存成功！"
                  })
                  this.getSearchPage()
                } else {
                  this.$message({
                    type: 'info',
                    message: res.msg
                  })
                }
              })
              .catch(err => {
                this.editFormVisible = false
                this.loading = false
                this.$message.error('保存失败，请稍后再试！')
              })
          }
        })
      },
      // 获取执行条件
      getExample() {
        this.logining = true
        let url = this.$global.javaUrl+"/target/list"
        let config = {
          headers:
            {
              //'Content-Type':'application/json',
              'user' : localStorage.getItem('userId')
            },
          params:
            {
              name:'',
              tag:'指标',
              pageNum: '1',
              pageSize:'200',

            }
        }
        axios.get(url, config).then(response=>{
          this.exampleData = response.data.data.rows


        })
      },
      // 关闭编辑、增加弹出框
      closeDialog(dialog) {
        if (dialog == 'edit') {
          this.editFormVisible = false
          this.editForm.id = ''
          this.editForm.name = ''
          this.editForm.indicators = ''
          this.indicatorIds = ''
        } else if (dialog == 'perm') {
          this.dataAccessshow = false
        } else if (dialog == 'unit') {
          this.unitAccessshow = false
        }
      },

      deleteUser(id) {
        let config = {
          headers:
            {
              'Content-Type':'application/json',
              'user' : localStorage.getItem('userId')
            },
          params:{'id':id}
        }

        this.$confirm('确定要删除吗?', '信息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            // 删除
            axios.get(this.$global.javaUrl +"/indicatorList/delete",config)
              .then(res => {
                if (res.data.data !=null) {
                  this.$message({
                    type: 'success',
                    message: '数据已删除!'
                  })
                  this.getSearchPage()
                }
              })
              .catch(err => {
                this.loading = false
                this.$message.error('数据删除失败，请稍后再试！')
              })
            this.getSearchPage()
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除！'
            })
          })
      },
      callFather(parm) {
        this.formInline.page = parm.currentPage
        this.formInline.limit = parm.pageSize
        this.getSearchPage()
      },
      reset(){
        this.formInline.page = 1
        this.formInline.name = ""
        this.formInline.tag = ""
        this.getSearchPage(this.formInline)
      },
      // 查看执行结果
      seeDetail(id,name){
          this.$router.push({path:'indicatorsDetail',query:{id:id,name:name}});
      },
    }
  }
</script>

<style scoped>
  .user-search {
    margin-top: 20px;
  }
  .userRole {
    width: 100%;
  }
</style>

